本篇我们将通过一个完整的个人博客案例来驱动学习 Nuxt 核心知识，尽量做到理论实践相结合，这样大家能够更牢固的掌握所学知识。

# 内容概要

本节作为起步，主要涉及环境准备和项目创建，让大家对 Nuxt 项目有个整体认知。具体内容如下：

• 开发环境和工具准备；
• 创建并完成第一个 Nuxt.js 应用；
• 如何打包和预览项目；
• 如何解决创建项目时可能出现的 443 错误。

# 环境准备

我们需要安装node作为nuxt的运行时，开发工具官方推荐使用VS Code，语法支持需要安装Volar插件。

• node.js lts；
• VS Code；
• Volar。

# 安装使用

# 创建项目

打开命令行终端，输入下面命令创建一个Nuxt3项目：

csharp
复制代码npx nuxi init nuxt3-app

踩坑指南：如果因为众所周知的原因出现 443 错误，请参考本文最后一部分的操作指南。

# 安装依赖

可以使用喜欢的包管理工具安装和管理依赖，npm/yarn/pnpm均可：

复制代码yarn install

# 启动项目

使用 yarn dev以开发模式启动 nuxt:

复制代码yarn dev

# 预览项目

✨浏览器会自动打开：http://localhost:3000

# 最小应用

在 Nuxt 中默认情况下有一个app.vue，如果我们只准备开发一个简单的单页应用或者就是一个落地页时，那么这样就够用了，此时Nuxt不会引入vue-router作为依赖。

但是这种情况很少见，我们通常需要创建不少页面再配置路由，并且在它们之间来回跳转。在 Nuxt 中要创建一个路由页面非常简单，你只需要创建一个pages目录，并创建一个index.vue这样的视图组件就好了，Nuxt会自动引入vue-router依赖，同时根据你创建的文件名称自动帮你配置一个路由。

下面我们来体验一下这个特性，我们创建pages/index.vue，并添加如下内容：

xml
复制代码<template>
  <div>Index Page</div>
</template>